<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://sdk.amazonaws.com/js/aws-sdk-2.744.0.min.js"></script>
  <script src="../lib/ObjectStorage.umd.js"></script>
</head>
<body>
<button id="btn1">s3协议账号密码直传 --- 大于100M自动采用切片</button>
<hr />
<button id="btn2">s3协议临时凭证直传--- 大于100M自动采用切片</button>
<hr />
<progress id="progressBar" value="0" max="100"></progress>
<button id="cancel">终止上传</button>
</body>

<script>
  let cancelToken = null;

  function setProgress(e) {
    let progressBar = document.getElementById('progressBar');
    let newValue = Math.floor(e.loaded / e.total * 100);
    progressBar.value = newValue; // 更新进度条的值
  }

  let btn1 = document.getElementById('btn1');
  btn1.addEventListener('click', function() {
    window.showOpenFilePicker().then(async (fileList) => {
      for (const fileHandle of fileList) {
        const file = await fileHandle.getFile();
        // 初始化
        let instance = new ObjectStorage({
          sdkObject: AWS,
          accessKey: 't9VqbrGfIJqnT5J9WovC',
          secretKey: 'nghZzqUeb0XB9utsikapY3dlgNmVzfkH4cfnsMg5',
          bucketName: 'lee-admin',
          type: 'minio',
          endPoint: 'http://127.0.0.1:9000'
        });
        instance.upload({
          // 文件最大100M，超过则默认切片
          maxSize: 1024 * 1024 * 100,
          // 每片5M
          partSize: 1024 * 1024 * 5,
          // 并行2片
          queueLength: 2,
          file,
          fileName: 'minio.exe',
          onUploadProgress(e) {
            console.log('e>>', e);
            setProgress(e);
          },
          onCancel(data) {
            console.log('cancelToken', data);
            cancelToken = data;
          }
        }).then(res => {
          console.log('response>>', res);
        }).catch(err => {
          console.error('err>>', err);
        });
      }
    });
  });

  let cancelBtn = document.getElementById('cancel');
  cancelBtn.addEventListener('click', function() {
    cancelToken && cancelToken.cancel();
  });
</script>
<script>
  let btn2 = document.getElementById('btn2');
  btn2.addEventListener('click', function() {
    window.showOpenFilePicker().then(async (fileList) => {
      for (const fileHandle of fileList) {
        const file = await fileHandle.getFile();
        fetch('http://localhost:8888/minio/get-sts').then(async response => {
          console.log('response>>', response);
          let json = await response.json();
          console.log(json);
          // 初始化
          let instance = new ObjectStorage({
            sdkObject: AWS,
            accessKey: json.accessKey,
            secretKey: json.secretKey,
            securityToken: json.sessionToken,
            bucketName: 'lee-admin',
            type: 'minio',
            endPoint: 'http://127.0.0.1:9000'
          });
          instance.upload({
            // 文件最大100M，超过则默认切片
            maxSize: 1024 * 1024 * 100,
            // 每片5M
            partSize: 1024 * 1024 * 5,
            // 并行2片
            queueLength: 2,
            file,
            fileName: 'test.zip',
            onUploadProgress(e) {
              console.log('e>>', e);
              setProgress(e);
            },
            onCancel(data) {
              cancelToken = data;
            }
          }).then(res => {
            console.log('response>>', res);
          }).catch(err => {
            console.error('err>>', err);
          });
        });
      }
    });
  });
</script>
</html>
